<template>
  <div class="SettingEditor">
    <div class="body">
      <CodeEditor
        class="code-editor"
        ref="codeEditor"
        v-model="setting"
      ></CodeEditor>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import TabInfo from '@/components/application-editor/object-editor-tabs/TabInfo';
import SettingEditableObject from '@/core/editable-object/setting/SettingEditableObject'
import CodeEditor from '@/components/common/code-editor/CodeEditor.vue'

@Component({
  components: { CodeEditor }
})
export default class SettingEditor extends Vue {
  @Prop({ required: true })
  protected tabInfo!: TabInfo;

  private setting = "123"

  private get settingEditableObject() {
    return this.tabInfo.object as SettingEditableObject
  }
}
</script>
<style scoped lang="scss">
@import '~@/style/variables.scss';
.SettingEditor {
  font-size: 12px;
  height: 100%;
  padding: 2px;
  .body {
    height: 100%;
    background: $panel-background-color;
  }
  .code-editor {
    height: 100%;
  }
  ::v-deep .CodeMirror,
  ::v-deep .CodeMirror-gutters {
    background: $panel-background-color;
  }
}
</style>
